<template>
  <ul class="movies">
    <li
      v-for="item in moviesList"
      :key="item._id"
      class="movies-content"
      @click="goDetail(item.movieid)"
    >
      <div class="movie-img">
        <img :src="formatUrl(item.img)" alt="" />
      </div>
      <div class="column-content">
        <div class="title">{{ item.nm }}</div>
        <div>
          <div v-if="item.globalReleased != false">
            观众评
            <span class="person">{{ item.sc }}</span>
          </div>
          <div v-else>
            <span class="person">{{ item.wish }}</span
            >人想看
          </div>
          <div></div>
        </div>
        <div class="star">主演{{ item.star }}</div>
        <div class="showInfo">{{ item.showInfo }}</div>
      </div>
      <div class="movie-button1" v-if="item.globalReleased">购票</div>
      <div class="movie-button2" v-else>预售</div>
    </li>
  </ul>
</template>

<script>
// import { moreApi } from "@/api/home";
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      // moviesList: [],
      // 总条数
      count: 0,
      // 所有电影的id
      ids: [],
      // 表示我一次想获取6条数据
      size: 6,
      stateIndex: 0,
    };
  },
  computed: mapState("index", ["moviesList"]),
  mounted() {
    // this.getMoviesList();
    // this.asyncGetMoviesList();
  },
  methods: {
    // ...mapActions("index", ["asyncGetMoviesList"]),
    // async getMoviesList() {
    //   const res = await moviesApi();
    //   this.moviesList = res.result;
    //   this.count = res.count;
    //   this.ids = res.ids;
    //   this.stateIndex = res.result.length;

    //   await this.$nextTick();
    //   this.$emit("finish");
    // },
    formatUrl(url) {
      return url.split("/w.h").join("/64.95");
    },
    // async getMore() {
    //   // 调用上拉加载的接口
    //   // console.log("getMore");
    //   const ids = this.ids.slice(this.stateIndex, this.stateIndex + this.size);
    //   const res = await moreApi({ ids: ids.join(",") });
    //   // console.log(res);
    //   this.moviesList = [...this.moviesList, ...res.result];
    //   // 每一次请求完，起始的index要加6
    //   this.stateIndex += this.size;
    //   await this.$nextTick();
    //   this.$emit("finishmore", this.moviesList.length >= this.count);
    // },
    goDetail(id) {
      this.$router.push("/detail/" + id);
    },
  },
};
</script>

<style lang="less" scoped>
.movies {
  margin-top: 10px;
  width: 100%;
  background-color: #fff;

  .movies-content {
    display: flex;
    align-content: center;
    padding: 10px 0 0 15px;
    position: relative;

    .column-content {
      width: 220px;
      font-size: @xs-font;
      font-weight: 200;
      border-bottom: 0.4267px solid @border-color;
      margin-left: 10px;
      line-height: 22px;
    }

    .movie-img .img {
      width: 64px;
      height: 90px;
    }

    .title {
      font-size: @l-font;
      color: #333;
      font-weight: 600;
      padding: 5px 0;
      .ell();
    }

    .person {
      color: #faaf00;
      font-size: @s-font;
      font-weight: 700;
      .ell();
    }

    .star {
      .ell();
    }

    .showInfo {
      .ell();
    }
  }

  .movie-button1 {
    width: 54px;
    height: 28px;
    font-size: @xs-font;
    background-color: #f03d37;
    text-align: center;
    line-height: 28px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 15px;
    color: #fff;
  }

  .movie-button2 {
    width: 54px;
    height: 28px;
    font-size: @xs-font;
    background-color: #3c9fe6;
    text-align: center;
    line-height: 28px;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 15px;
    color: #fff;
  }
}
</style>
